import React from 'react'
import clsx from 'clsx'
import Translate from '@docusaurus/Translate'
import 'animate.css/animate.min.css'
import { AnimationOnScroll } from 'react-animation-on-scroll'
import RISCVImage from '@site/static/img/RISCV.svg'
import styles from './styles.module.css'
import PropTypes from 'prop-types'

interface Feature {
  Svg: React.ComponentType<React.ComponentProps<'svg'>>
}

const FeatureList: Feature[] = [
  {
    Svg: RISCVImage,
  },
]

function Feature({ Svg }) {
  return <Svg className={styles.featureSvg} role="img" />
}

Feature.propTypes = {
  Svg: PropTypes.elementType.isRequired,
}

interface SubtextItem {
  id: number
  text: JSX.Element
}

const subtexts: SubtextItem[] = [
  {
    id: 1,
    text: (
      <Translate
        id="component.home.HomepageRISC.subtexts.1"
        description="The First subtext of PolyOS and RISC-V introduction">
        PolyOS exclusively targets the RISC-V architecture as its
        operational framework.
      </Translate>
    ),
  },
  {
    id: 2,
    text: (
      <Translate
        id="component.home.HomepageRISC.subtexts.2"
        description="The second subtext of PolyOS and RISC-V introduction">
        We aspire to contribute to the development of the hardware and
        software ecosystem of RISC-V.
      </Translate>
    ),
  },
  {
    id: 3,
    text: (
      <Translate
        id="component.home.HomepageRISC.subtexts.3"
        description="The third subtext of PolyOS and RISC-V introduction ">
        Our objective is to pioneer the identification of the
        inaugural cohort of end-users for RISC-V.
      </Translate>
    ),
  },
]

export function HomepageRISC(): React.JSX.Element {
  return (
    <section className={clsx(styles.heroBanner)}>
      <div className="container">
        <div className={clsx('card', styles.feature)}>
          <div className="row row--no-gutters">
            <div className={clsx('col col--6', styles.textCenter)}>
              <AnimationOnScroll animateIn="animate__fadeIn">
                <h1 className={clsx('col col--12', styles.title)}>
                  <Translate
                    id="component.home.HomepageRISC.title"
                    description="about PolyOS and RISC-V">
                    PolyOS and RISC-V
                  </Translate>
                </h1>
                {subtexts.map((subtext: SubtextItem) => (
                  <p key={subtext.id} className={styles.subtext}>
                    {subtext.text}
                  </p>
                ))}
              </AnimationOnScroll>
            </div>
            <div className={clsx('col col--6', styles.center)}>
              <AnimationOnScroll animateIn="animate__fadeIn">
                {FeatureList.map((props, idx) => (
                  <Feature key={idx} {...props} />
                ))}
              </AnimationOnScroll>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
